<template>
  <div class="container">
    <div class="boxWrap">
      <!-- 头部 -->
      <loginHeader></loginHeader>
      <div class="mainBox identityChoiceBox">
        <div class="choiceTitle">请选择应用类型</div>
        <el-carousel trigger="click" height="350px">
          <el-carousel-item
            v-for="(item, index) in alertDataPageRe"
            :key="index"
          >
            <div class="choiceTypeBox">
              <el-col :span="12" class="ul" v-for="(item, i) of item" :key="i">
                <div
                  class="single"
                  @mouseover="mouseOver(item.id)"
                  @mouseleave="mouseleave(item.id)"
                  @click="toSystem()"
                >
                  <div class="title">
                    <img
                      src="/static/img/interfacePlatform/selectInterfaceType.png"
                      alt=""
                    />
                    <span class="way">{{ item.name || '--' }}</span>
                  </div>
                  <div class="explainBox">
                    <span>{{ item.version || '--' }}</span>
                  </div>
                  <div>
                    <el-button
                      style="display: none"
                      class="commonBut saveBtn"
                      type="primary"
                      :id="'currentChoose' + item.id"
                      >选择</el-button
                    >
                  </div>
                </div>
              </el-col>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="loginOut">
          <el-button class="commonBut" @click="loginOut">退出系统</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'
import loginHeader from '@/components/publicCom/loginHeader'
export default {
  name: 'interfaceTypeSelect',
  components: {
    loginHeader,
  },
  data() {
    return {
      alertDataPage: [],
      alertDataPageRe: [], //预警处理的二维数组
    }
  },
  created() {
    this.getAlertList()
  },
  methods: {
    //获取待处理预警数据
    getAlertList() {
      this.axios({
        method: 'post',
        url: 'api-m/inputServer/base/v1/list',
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.alertDataPage = res.data.result
              console.log(11111, this.alertDataPage)
              if (this.alertDataPage) {
                this.alertDataPageRe = this.getTwoArray(this.alertDataPage, 2)
                console.log(999, this.alertDataPageRe)
              }
            } else {
              this.$message.error('数据获取失败')
            }
          },
          (res) => {
            this.$message.error('数据获取失败')
          }
        )
        .catch((error) => {})
    },
    getTwoArray(arr, num) {
      // 一维数组转换为二维数组
      const iconsArr = [] // 声明数组
      arr.forEach((item, index) => {
        const page = Math.floor(index / num) // 计算该元素为第几个素组内
        if (!iconsArr[page]) {
          // 判断是否存在
          iconsArr[page] = []
        }
        iconsArr[page].push(item)
      })
      return iconsArr
    },
    //跳转到系统内部
    toSystem(choiceType) {
      alert('登录系统')
      //  this.$message.success("选择成功");
      // localStorage.setItem("isFirstIdentityChoice", false);
      // localStorage.setItem("choiceType", choiceType);
      // if (choiceType == "owner") {
      //     localStorage.setItem("judgeRoleCode", "owner");
      // } else {
      //     localStorage.setItem("judgeRoleCode", "constructor");
      // }
      this.getMenuList(choiceType)
    },
    // 移入
    mouseOver(id) {
      // alert(id)
      $('#currentChoose' + id).show()
    },
    //移出
    mouseleave(id) {
      $('#currentChoose' + id).hide()
    },
    getMenuList(choiceType) {
      this.axios({
        method: 'post',
        url: '/api-m/menus/me',
        data: {
          // selectedName: choiceType
        },
        headers: {
          Authorization: localStorage.getItem('access_token'), //设置token 其中K名要和后端协调好
        },
      }).then(
        (response) => {
          //先清除之前的选中
          //清除tab栏数据
          this.$store.state.sliderBar = []
          this.$store.state.keekAlives = []
          localStorage.removeItem('sliderBar')
          // 顶部栏的选中清空
          this.$store.state.currentItem = ''
          this.$store.state.currentSelectItem = ''

          this.canLogin = false
          // this.$store.state.menuList = response.data;
          if (response.data == '' || response.data == null) {
            this.errorMsg_QY = '该账号未分配权限'
            this.errorMsg_JC = '该账号未分配权限'
            return
          }
          // 处理返回数据，设置默认选中项
          for (var i = 0; i < response.data.appList.length; i++) {
            var item = response.data.appList[i]
            if (item.isSelected) {
              response.data.appList.splice(i, 1)
              response.data.appList.unshift(item)
            }
          }
          // 处理数据结束
          this.$store.state.menuList = response.data.appList[0].menuList
          var menuListTotalCon = []
          for (var i = 0; i < response.data.appList.length; i++) {
            var item = response.data.appList[i]
            menuListTotalCon.push(response.data.appList[i].menuList)
          }

          var menuListTotal = []
          for (var i = 0; i < menuListTotalCon.length; i++) {
            menuListTotal = menuListTotal.concat(menuListTotalCon[i])
          }

          this.$store.state.menuListTotal = menuListTotal

          this.$store.state.appList = response.data.appList
          this.$store.state.currentItem = ''
          // localStorage.setItem("menuList",JSON.stringify(response.data));
          // localStorage.setItem("urlName", "interfaceAccountClient");
          //默认选中

          var item = response.data.appList[0]

          //默认选中
          if (item.menuList[0].child) {
            this.$router.push(item.menuList[0].child[0].url)
            this.$store.state.activeMenu = item.menuList[0].child[0].url
            //tab栏选中
            this.$store.state.sliderBar = [item.menuList[0].child[0]]
            this.$store.state.activeIndex = item.menuList[0].child[0].url
          } else {
            if (item.code == 'company') {
              localStorage.setItem('urlName', 'companyHome')
            } else if (item.code == 'owner') {
              localStorage.setItem('urlName', 'constructCompanyHomeJS')
            } else if (item.code == 'project' || item.code == 'constructor') {
              localStorage.setItem('urlName', 'constructCompanyHome')
            }
            this.$router.push(item.menuList[0].url)
            this.$store.state.activeMenu = item.menuList[0].url

            //tab栏选中
            localStorage.removeItem('sliderBar')
          }
        },
        (response) => {
          this.isAdd = false
          this.$message.error('登录失败')
          this.canLogin = false
        }
      )
    },
    //跳转登录到接口平台登录页
    loginOut() {
      if (this.isCzUser()) {
        this.toLoginNext('loginNextCz', 'DT')
      } else {
        this.toLoginNext('loginNext', 'DT')
      }
    },
    toLoginNext(name, type) {
      this.$router.push({
        name: name,
        query: {
          type: type,
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .boxWrap {
    background: #f2f4f6;
    position: fixed;
    top: 0;
    left: 0;
    right: -17px;
    bottom: 0;
    background-size: 100% 100%;
    overflow-y: auto;
    .mainBox {
      width: 980px;
      height: 580px;
      background-color: #fff;
      margin: 0 auto;
      border-radius: 10px;
      margin-bottom: 35px;
      text-align: center;
      position: relative;
      .choiceTitle {
        padding: 50px 0 40px 0;
        font-size: 28px;
        color: #333333;
        text-align: center;
        font-weight: 700;
      }
      .choiceTypeBox {
        display: block;
        text-align: center;
        margin-bottom: 0;
        padding: 0 216px;
        .el-col-12 {
          padding-top: 6px;
          &:nth-child(even) {
            padding-left: 40px;
          }
        }
        p {
          font-size: 28px;
          color: #333;
          margin-bottom: 60px;
        }
        .ul .single {
          display: inline-block;
          float: left;
          width: 234px;
          height: 324px;
          color: #fff;
          border-radius: 8px;
          cursor: pointer;
          border: 1px solid #fff \0;
          // 动画
          border-radius: 5px;
          transition: ease-in 0.3s;
          background-size: 0 1px, 1px 0, 0 1px, 1px 0;
          background-position: left top, right top, right bottom, left bottom;
          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
          img {
            width: 120px;
            height: 120px;
          }
          .way {
            font-size: 18px;
            display: block;
            color: #333;
            margin: 16px 0;
            font-weight: bold;
          }
          .title {
            padding-top: 8px;
          }
          .explainBox {
            height: 70px;
            padding: 0 32px;
            text-align: center;
            margin-bottom: 16px;
            span {
              font-size: 14px;
              color: #666;
              line-height: 21px;
            }
          }
          &:hover {
            border: 1px solid #009588 \0;
            background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
            -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
            -o-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
            .way {
              color: #009588;
            }
          }
        }
      }
      .loginOut {
        // margin-top: 352px;
        margin-top: 20px;
      }
    }
  }
}
.container .boxWrap .identityChoiceBox {
  padding: 0;
}
.boxWrap /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/headerBG.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 125px;
}
</style>
